<template>
    <el-main class="pg-el-main">
        <el-container>
            <el-aside width="280px">
                <el-tabs :stretch="true">
                    <el-tab-pane label="组件">
                        <!--  :height="innerHeight" -->
                        <componet-list />
                    </el-tab-pane>
                    <el-tab-pane label="页面元素">
                        <!-- <component-tree v-if="loadSuccess"></component-tree> -->
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
            <el-main class="page-editor-wrap">
                <page-editor @tt="ttt" />
            </el-main>
            <el-aside width="400px">
                <el-tabs :stretch="true">
                    <el-tab-pane label="组件属性">
                        <!-- innerHeight -->
                        <attribute-editor :currentComMdl="currentComMdl" />
                    </el-tab-pane>
                    <el-tab-pane label="数据">
                        <!-- <Data-editor v-if="loadSuccess" /> -->
                    </el-tab-pane>
                </el-tabs>
            </el-aside>
        </el-container>
    </el-main>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import ComponetList from '@/components/customPage/layout/ComponetList.vue'
import PageEditor from '@/components/customPage/layout/PageEditor.vue'
import AttributeEditor from '@/components/customPage/layout/AttributeEditor.vue'
import BasePageMdl from '@/model/customPageCfg/BasePageMdl'

@Component({
    name: 'pageDesigner',
    components: {
        ComponetList,
        PageEditor,
        AttributeEditor,
    },
})
export default class PageDesigner extends Vue {
    currentComMdl: BasePageMdl | null = null

    // get currentRegMdlName() {
    //     return this.currentComMdl ? this.currentComMdl.regMdlName : ''
    // }

    ttt(item: BasePageMdl) {
        console.log(item)
        this.currentComMdl = item
    }
}
</script>

<style></style>
